<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加角色</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <style type="text/css">
        .div1{
            margin-top: 20px;
            font-size: 16px;
            width: 250px;
        }
    </style>
</head>
<body>
<div style="padding-left: 5%;padding-top:5%">
    <form  class="layui-form" method="" action="" style="margin-top: 30px;">

    <div class="layui-form-item div1">
        <label class="layui-form-label">角色名称</label>
        <div class="layui-input-block">
            <input type="text" name="role_name" lay-verify="required | role_name" autocomplete="off" placeholder="请输入角色名" class="layui-input">
        </div>
    </div>
    <button type="button" lay-filter="demo1" lay-submit="demo1" style="margin-left:100px;margin-top: 20px" class="layui-btn">添加</button>
    <button type="button" id="quit" style="margin-left: 20px;margin-top: 20px" class="layui-btn">关闭</button>
    </form>
</div>
</body>
<script src="../../js/jquery-3.4.1.js"></script>
<script rel="script" src="../../layui/layui.js"></script>
<script>
    layui.use(['laydate','form','layer'], function() {
        var laydate = layui.laydate;
        var form = layui.form
            , layer = layui.layer;



        var flag=true;

        $(function () {
            $("input[name=role_name]").blur(function (data) {
                var name=$("input[name=role_name]").val();
                    $.ajax({
                        url:"/findByRoleName.do",
                        type:"post",
                        data:{role_name:name},
                        success:function (res) {
                            if (res.code == 500 ) {
                                layer.msg(res.msg,{icon:5});
                                flag=false;
                            }else if (res.code ==502) {
                                layer.msg(res.msg,{icon:5});
                            }else if (res.code == 405){
                                layer.msg(res.msg,{icon:5});
                            }else {
                                flag=true;
                            }
                        }
                    });
            });
            $("#quit").click(function () {
                parent.layer.close(parent.layer.index);
            });
        });

        form.on('submit(demo1)', function(data) {
            var name=$("input[name=role_name]").val();
            if (!flag){
                layer.msg("角色名重复",{icon:5});
            } else {
                $.ajax({
                    url: "/roleAdd.do",
                    type: "post",
                    data: {role_name:name},
                    success: function (res) {
                        if (res.code == 200) {
                            layer.msg(res.msg, {icon: 1, time: 2000});
                            var second = 1;
                            //定时器2秒后跳转
                            var interval = setInterval(function () {
                                second--;
                                if (second === -1) {
                                    parent.layer.close(parent.layer.index);
                                    clearInterval(interval);
                                }
                            }, 1000);
                        } else if (res.code == 500) {
                            layer.msg(res.msg, {icon: 5});
                        }else if (res.code == 405){
                            layer.msg(res.msg,{icon:5});
                        }
                    }
                });
            }
        });
    });
    $(function () {
        $("#quit").click(function () {
            parent.layer.close(parent.layer.index);
        })
    });
</script>
</html>